import React, { useState } from 'react'
import PubSub from 'pubsub-js'
import './Header.css'
export default function Header() {
  const [todoName, setTodoName] = useState('')
  // 配合input受控的事件处理函数
  function handle(e) {
    setTodoName(e.target.value.trim())
  }

  // 按下回车键之后的事件处理函数
  function sendTodoNameForAdd(e) {
    //判断是否是回车,是否是空值
    if (e.keyCode !== 13 || !todoName) return

    //将任务名传递给App
    PubSub.publish('add', todoName)

    // 清空文本框
    setTodoName('')
  }
  return (
    <div className="todo-header">
      <input
        type="text"
        value={todoName}
        onChange={handle}
        onKeyDown={sendTodoNameForAdd}
      />
    </div>
  )
}
